<template>
  <div>
    <!-- 头部 -->
    <hm-header>个人中心</hm-header>
    <!-- 信息 -->
    <div class="info">
      <div class="left">
        <img :src="$axios.defaults.baseURL + info.head_img" alt />
      </div>
      <div class="center">
        <div class="name">
          <i v-if="info.gender === 0" class="iconfont iconxingbienv"></i>
          <i v-else class="iconfont iconxingbienan"></i>
          <span>{{ info.nickname }}</span>
        </div>
        <div class="date">{{ info.create_date | date }}</div>
      </div>
      <!-- <div class="right">
        <i class="iconfont iconjiantou1"></i>
      </div> -->
    </div>
    <!-- 列表 -->
    <van-cell-group>
      <van-cell title="我的关注" is-link value="关注的用户" @click="$router.push('/myfollow')" />
      <van-cell title="我的跟帖" is-link value="跟帖/回复" @click="$router.push('/mycomments')"/>
      <van-cell title="我的收藏" is-link value="文档/视频" @click="$router.push('/my-star')" />
      <van-cell title="设置" is-link @click="$router.push('/edit')" />
      <van-cell title="退出" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    }
  },
  created() {
    const user_id = localStorage.getItem('user_id')
    const token = localStorage.getItem('token')
    // 获取个人信息
    this.$axios.get(`/user/${user_id}`).then(res => {
      console.log('获取个人信息', res.data)

      const { statusCode, data, message } = res.data

      if (statusCode === 200) {
        this.info = data
      } else if (statusCode === 401 && message === '用户信息验证失败') {
        console.log('token失效')
      } else {
        console.log('获取失败  网络失败')
      }
    })
  },
  methods: {
    // 退出
    logout() {
      this.$dialog
        .confirm({
          title: '标题',
          message: '弹窗内容'
        })
        .then(() => {
          // on confirm
          localStorage.removeItem('token')
          localStorage.removeItem('user_id')

          this.$router.push('/login')
          this.$toast.success('退出成功')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="less">
.info {
  height: 100px;
  border-bottom: 2px solid #ccc;
  display: flex;
  align-items: center;
  .left {
    margin: 0 20px;
    img {
      width: 70px;
      height: 70px;
      display: block;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .center {
    flex: 1;
    line-height: 30px;
  }

  .right {
    width: 70px;
    text-align: center;
  }
}
</style>
